<template>
  <div class="timePickerMini">
    <span class="text">{{ times.startTime }} / {{ times.endTime }}</span>
    <el-date-picker
      class="hiddenDatePicker"
      v-model="endTime"
      value-format="yyyy-MM-dd"
      size="mini"
      :clearable="false"
      :editable="false"
      @change="endTimeChange"
      type="date">
    </el-date-picker>
  </div>
</template>

<script>
import common from "../plugins/common.js";
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: "timePickerMini",
  props: {
    range: {
      type: String,
      required: true
    },
    change: {
      type: Function
    }
  },
  computed: {
    ...mapGetters({
      times: 'getTimes'
    })
  },
  data() {
    return {
      endTime: common.changeDateToString(new Date()),
    }
  },
  methods: {
    ...mapMutations([
      'changeStartTime',
      'changeEndTime',
    ]),
    endTimeChange(val) {
      this.endTime = val
      this.changeEndTime(val)
      this.changeStartTime(this.range)
      this.change(this.range)
    },
  },
  created() {
    //init times
    this.changeEndTime(this.endTime)
    this.changeStartTime(this.range)
  },
  watch: {
    range(newVal) {
      this.changeStartTime(newVal)
    }
  }
}
</script>

<style scoped>
.timePickerMini {
  position: relative;
  display: inline-block;
  font-size: 12px;
  color: #bfbfbf;
}
.timePickerMini .text {
  position: relative;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  /* z-index: 2; */
}
.timePickerMini .hiddenDatePicker {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 145px;
  height: 28px;
  /* z-index: 1; */
}
</style>
<style>
.timePickerMini .hiddenDatePicker .el-input__inner {
  cursor: pointer;
}
</style>
